<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div style="padding-bottom: 10px">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索框</label>
                                <div class="layui-input-block">
                                    <input type="text" name="match" placeholder="请输入页面名或描述" autocomplete="off"
                                        class="layui-input" style="width:500px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="menusParamQuery">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                            <div class='layui-inline' style='float:right'>
                                <button class="layui-btn layuiadmin-btn-menus" data-type="add">添加</button>
                            </div>
                        </div>
                    </div>
                </div>

                <table id="menus-data-form" lay-filter="menus-data-form"></table>
                <script type="text/html" id="toolbar">
          <div class="layui-btn-container">
              <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
              <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
          </div>
      </script>
            </div>
        </div>
    </div>

    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
            , my_send: '../myModules/my_send'
        }).use(['index', 'useradmin', 'table', 'my_send'], function () {
            var $ = layui.$
                , form = layui.form
                , table = layui.table
                , my_send = layui.my_send
                , http_proxy = layui.http_proxy;

            //搜索
            form.on('submit(menusParamQuery)', function (data) {
                //执行重载
                table.reload('menusTable', {
                    where: data.field
                });
            });

            table.render({
                elem: '#menus-data-form'
                , id: 'menusTable'
                , height: 500
                , url: http_proxy('/menu/getMenuResources') //数据接口
                , page: true //开启分页
                , method: 'post'
                , cols: [[ //表头
                    {type:'numbers', title: '序号', width: '5%', fixed: 'left', unresize: true }
                    , { field: 'mpid', hide: true }
                    , { field: 'pmName', title: '菜单名称', width: '20%', align: 'center', unresize: true }
                    , { field: 'pmComment', title: '描述', width: '65%', align: 'center', unresize: true }
                    , { fixed: 'right', title: '操作', width: '10%', align: 'center', toolbar: '#toolbar', unresize: true }
                ]]
                , response: {
                    countName: 'total' //规定数据总数的字段名称，默认：count
                    , dataName: 'rows' //规定数据列表的字段名称，默认：data
                }
            });

            //添加
            $('.layui-btn.layuiadmin-btn-menus').on('click', function () {
                layer.open({
                    type: 2
                    , title: '添加新菜单'
                    , content: 'menusform.html'
                    , area: ['500px', '550px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submit = layero.find('iframe').contents().find("#menus-submit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(menus-submit)', function (data) {
                            var field = data.field; //获取提交的字段
                            field.parentId = field.parent_tree_select_nodeId;
                            field.menuType = 1;
                            my_send({
                                url: '/menu/addMenuResource'
                                , type: "post"
                                , method: 'post'
                                , data: field
                                , success: function (obj) {
                                    table.reload('menusTable');
                                }
                            })
                            layer.close(index); //关闭弹层
                        });

                        submit.trigger('click');
                    }
                });
            });

            table.on('tool(menus-data-form)', function (obj) {
                var data = obj.data;
                var event = obj.event;

                var mpid = data.mpid;

                if (event === 'delete') { //删除
                    layer.confirm('是否确认删除当前行数据', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        my_send({
                            url: '/menu/deleteMenuResource'
                            , type: 'post'
                            , data: { 'mpid': mpid }
                            , success: function (obj) {
                                table.reload('menusTable');
                            }
                        });
                    });
                } else if (event === 'edit') { //编辑
                    layer.open({
                        type: 2
                        , title: '修改菜单'
                        , content: 'menusform.html?mpid=' + mpid
                        , area: ['500px', '550px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submit = layero.find('iframe').contents().find("#menus-submit");

                            //监听提交
                            iframeWindow.layui.form.on('submit(menus-submit)', function (data) {
                                var field = data.field; //获取提交的字段
                                field.parentId = field.parent_tree_select_nodeId;
                                field.menuType = 1;
                                my_send({
                                    url: '/menu/updateMenuResource'
                                    , type: 'post'
                                    , data: field
                                    , success: function (obj) {
                                        table.reload('menusTable');
                                    }
                                })
                                layer.close(index); //关闭弹层
                            });

                            submit.trigger('click');
                        }
                    });
                }
            })
        });
    </script>
</body>

</html>